<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-侦听器总结</title>
</head>
<body>
  <div id="app1">
     {{ msg1 }}
  </div>
  <div id="app2">
     {{ msg2 }}
  </div>
  <div id='app3'>
     {{ msg3 }}
  </div>
  <div id="app4">
     {{ personObj }}
  </div>
  <div id="app5">
    {{ msg5 }}
  </div>
  
   <!-- 在侦听器中可以执行异步操作,但是在计算属性中不行 -->
  <div id="app6">
     {{ question6 }}
  </div>
   <!-- 在侦听器中可以执行异步操作,但是在计算属性中不行 -->
   <div id="app7">
      {{ question7 }}
   </div>
</body>
<script src="./vue1111.js"></script>
<script>

  //函数类型
  var App1 = new Vue({
    el:'#app1',
    data:{
      msg1:'hello world!'
    },
    watch:{
      msg1(){
        console.log('msg值发生改变')
      }
    }
  });
  //更改msg1的值，App.msg1= 'nihao~~~~~~',控制台打印出msg值发生改变;
  
  //字符串类型，值为方法名字，被侦听的数据改变时，会执行该方法；
  var App2 = new Vue({
    el:'#app2',
    data:{
      msg2:'hello hello'
    },
    watch:{
      msg2:'msgChange2'
    },
    methods:{
      msgChange2(){
        console.log('msg2的值发生改变了')
      }
    }
  });

  //对象类型，写成对象类型提供可选项，handler deep  immediate
  //可选项为handler时，值的类型为函数/字符串，写成字符串时为方法名；
  var App3 = new Vue({
    el:'#app3',
    data:{
      msg3:'我是handler类型，值为函数或者字符串'
    },
    watch:{
      msg3:{
        handler(){
          console.log('msg3的值发生改变')  
        }
      }
    }
  });
  
  //可选项为deep
  //默认情况下，侦听器对象只侦听引用的变化。只有给对象赋值的时候才能监听到他，所以需要使用deep选项，让其可以发现对象内部值的变化，将deep的值设置为true，那么无论该对象被嵌套的有多深，都会被侦听到。
  var App4 = new Vue({
    el:'#app4',
    data:{
      personObj:{
        age:18,
        name:'宋起宗'
      }
    },
    watch:{
      personObj:{
        handler(){
          console.log('对象的值发生改变')
        },
        deep:true
      }
    }
  });
  //注意，当对象的属性较多的时候，性能开销会比较大，此时可以监听对象的某个属性。
  
  //当key值类型为字符串时，可以实现监听对象当中的某一个属性;
  var App5 = new Vue({
    el:'#app5',
    data:{
      msg5:{
         name:'宋起宗',
         age:'18',
      }
    },
    watch:{
      'msg5.name'(){
        console.log('对象的值发生改变')
      }
    }
  });


//侦听器watch擅长处理的场景是:一个数据影响多个数据;计算属性擅长处理场景是:多个数据影响一个数据;
//*在侦听器中可以实现异步操作,但是在计算属性中不行
  
var  App6 = new Vue({
  el:'#app6',
  data:{
    question6:'1111',
  },
  watch:{
    question6(){
      setTimeout(()=>{
        alert(this.question6)
      },1000)
    }
  }
});

//先执行一次在监听
var App7 = new Vue({
  el:'#app7',
  data:{
    question7:'abc'
  },
  watch:{
    question7:{
      handler(){
        alert('abc')
      },
      immidate:true
    }
  }
})


</script>
</html>